@types/react-redux

What is @types/react-redux?

The @types/react-redux package provides TypeScript type definitions for the react-redux library, which allows React components to interact with a Redux store. It enables type checking and IntelliSense for react-redux functions and components when using TypeScript.

What are @types/react-redux's main functionalities?

Provider Component Typing

The Provider component makes the Redux store available to any nested components that need to access the Redux store.

import { Provider } from 'react-redux';
import { store } from './store';

const App = () => (
  <Provider store={store}>
    {/* Your app components go here */}
  </Provider>
);

connect Function Typing

The connect function connects a React component to the Redux store. It provides type checking for the mapStateToProps and mapDispatchToProps arguments, as well as the component's props.

import { connect } from 'react-redux';

interface Props {
  todos: string[];
}

const TodoList: React.FC<Props> = ({ todos }) => (
  <ul>{todos.map(todo => <li key={todo}>{todo}</li>)}</ul>
);

const mapStateToProps = (state: RootState) => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);

Hooks Typing

TypeScript types for the useSelector and useDispatch hooks from react-redux, which allow you to access the state and dispatch actions in a type-safe manner.

import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './store';

const TodoList = () => {
  const todos = useSelector((state: RootState) => state.todos);
  const dispatch = useDispatch();

  // Use dispatch with type-checked actions
  // ...

  return <ul>{todos.map(todo => <li key={todo}>{todo}</li>)}</ul>;
};

Other packages similar to @types/react-redux

mobx-react

mobx-react provides React bindings for MobX, which is a state management library. It is similar to react-redux in that it allows React components to react to state changes, but it uses observables rather than a single store and actions.

zustand

zustand is a small, fast, and scalable bearbones state-management solution using simplified flux principles. Unlike react-redux, it doesn't require a Provider component or connect function, and it uses hooks for state management.

recoil

Recoil is a state management library for React that provides several capabilities similar to Redux. It allows you to manage global state with a more React-like API using atoms and selectors, which can be seen as an alternative to the Redux pattern.

README

Installation

npm install --save @types/react-redux

Summary

This package contains type definitions for react-redux (https://github.com/reduxjs/react-redux).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-redux.

Additional Details

• Last updated: Mon, 23 Sep 2024 18:39:57 GMT
• Dependencies: @types/hoist-non-react-statics, @types/react, hoist-non-react-statics, redux

Credits

These definitions were written by Qubo, Curits Layne, Frank Tan, Nicholas Boll, Dibyo Majumdar, Valentin Descamps, Johann Rakotoharisoa, Anatoli Papirovski, Boris Sergeyev, Søren Bruus Frank, Jonathan Ziller, Dylan Vann, Yuki Ito, Kazuma Ebina, Michael Lebedev, Lenz Weber, and Mark Erikson.